<html xmlns:th="http://www.thymeleaf.org"  
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"    
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">    
<html>
<head th:include="common/common::header">
    <meta charset="UTF-8">
    <style type="text/css">
      #index {
            justify-content: space-between;
            flex-wrap: wrap;
            opacity: 0;
        }
        .index-l {
            width: 100%;
            margin-top: 0.5%;
            margin-left: 29px;
        }
    </style>
</head>

<body>
		 <div class="form-item" style="margin-top: 0.5%">
			       <label for="" style=" padding-left: 28%;" class="label-top" >标题：</label>
			       <input  type="text" class="easyui-textbox" id="navigation_title"/>
		      		<a onclick="searchnavigation()"   href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true">搜索</a>
		  </div>
		<div class="index-l" id="NavigationToolbar">
	      <div> <shiro:hasPermission name="app:navigation:add">
	      	  <a href="javascript:void(0)" onclick="opendialog({title:'导航-新增',width:'50%',height:'60%',url:'app/navigation/add_01',onClose:searchnavigation})" data-options="iconCls:'fa fa-pencil'" id="addr" class="easyui-linkbutton primary" style="height: 32px;border-left-width: 1px;">新增</a>
       		  </shiro:hasPermission>
       		   <shiro:hasPermission name="app:navigation:edit">
       		  <a href="javascript:void(0)" onclick="opendialog({title:'导航-编辑',width:'50%',height:'60%',checkSelect:true,gridId:'NavigationTable',url:'app/navigation/edit_01',onClose:searchnavigation})"  class="easyui-linkbutton error" id="reedit" data-options="iconCls:'fa fa-gears'">修改</a>
       		  </shiro:hasPermission>
       		  <a href="javascript:void(0)" onclick="searchnavigation()" id="rebreak" class="easyui-linkbutton success" data-options="iconCls:'fa fa-refresh'">刷新</a>
	      </div>
	      </div>
		<div id="cc" class="easyui-layout" style="width:100%;height:90%;">
 		 <div data-options="region:'west',title:'导航',split:true" style="width:10%;">
	      	<ul id="navigation_tree"></ul> 
	      </div>
            <div data-options="region:'center',title:'列表'" style="padding:5px;background:#eee;">
            	<table id="NavigationTable" style="opacity: 1;width:100%;height:780px;margin-top: 2%" class="easyui-datagrid"  th:attr="data-options=${dataGrid }">
            </table>
            </div>
			<input  type="hidden" class="easyui-textbox" id="navigation_id"/>
	</div>
<script type="text/javascript">
function searchnavigation(){
		$('#navigation_tree').tree('reload'); 
		AM.gridSearch({
		gridId:'NavigationTable',
		data:[
			  {field:'title',type:'textbox',id:'navigation_title'}
		     ]
	});
}
	jQuery('#navigation_tree').tree({    
   		parentField:'pid',
   		textField:'text',
   		valueField:'id',
	    url:'/app/navigation/load_pid_list',
	    onClick: function(node){
	    	jQuery("#NavigationTable").datagrid("options").queryParams.filterRules='[{"op":"contains","field":"id","value":"'+node.id+'"}]';
	    	jQuery("#NavigationTable").datagrid("reload");
		}

	});
</script>
</body>
</html>